<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-12-01 09:38:01
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2023-12-05 21:45:12
 * @FilePath: /sports_helper/src/pages/evaluate/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="page py_default">
    <van-form @submit="onSubmit" class="section pitch_default">
      <van-cell-group class="row" inset>
        <van-field
          name="gender"
          label="性别"
          input-align="right"
          :rules="[{ required: true, message: '请您选择性别' }]"
        >
          <template #input>
            <van-radio-group v-model="formState.gender" direction="horizontal">
              <van-radio :name="1">男</van-radio>
              <van-radio :name="2">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          name="ageRange"
          label="年龄"
          input-align="right"
          class="van-field_custom wrap"
          :rules="[{ required: true, message: '请您选择年龄' }]"
        >
          <template #input>
            <van-radio-group
              v-model="formState.ageRange"
              direction="horizontal"
              class="radio-button"
            >
              <van-radio :name="1">青年(18-44岁)</van-radio>
              <van-radio :name="2">中年(45-64岁)</van-radio>
              <van-radio :name="3">老年(65-75岁)</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="formState.height"
          type="number"
          name="height"
          label="身高"
          placeholder="身高"
          input-align="right"
          class="unit unit_height"
          :rules="[{ required: true, message: '请您输入身高' }]"
        />
        <van-field
          v-model="formState.weight"
          type="number"
          name="weight"
          label="体重"
          placeholder="体重"
          input-align="right"
          class="unit unit_weight"
          :rules="[{ required: true, message: '请您输入体重' }]"
        />
        <van-field
          name="obesityLevel"
          label="肥胖程度"
          input-align="right"
          class="van-field_custom wrap"
        >
          <template #input>
            <van-radio-group
              v-model="formState.obesityLevel"
              :data="formState.obesityLevel"
              direction="horizontal"
              class="radio-slider"
            >
              <van-radio :disabled="true" :name="1">正常</van-radio>
              <van-radio :disabled="true" :name="2">超重</van-radio>
              <van-radio :disabled="true" :name="3">肥胖</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="formState.sbp"
          type="number"
          name="sbp"
          label="收缩压"
          placeholder="收缩压"
          input-align="right"
          class="unit unit_sbp"
          @blur="verifySBP"
          :rules="[{ required: true, message: '请您输入收缩压' }]"
        />
        <van-field
          v-model="formState.dbp"
          type="number"
          name="dbp"
          label="舒张压"
          placeholder="舒张压"
          input-align="right"
          class="unit unit_dbp"
          @blur="verifyDBP"
          :rules="[{ required: true, message: '请您输入舒张压' }]"
        />
      </van-cell-group>

      <van-cell-group class="row" inset>
        <van-field
          name="hasHD"
          label="是否服用降压药"
          input-align="right"
          class="van-field_custom"
        >
          <template #input>
            <van-radio-group v-model="formState.hasHD" direction="horizontal">
              <van-radio :name="true">是</van-radio>
              <van-radio :name="false">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-if="formState.hasHD === true"
          name="hasβblocker"
          label="是否服用β受体阻滞剂"
          input-align="right"
          class="van-field_custom"
        >
          <template #input>
            <van-radio-group
              v-model="formState.hasβblocker"
              direction="horizontal"
            >
              <van-radio :name="true">是</van-radio>
              <van-radio :name="false">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          name="hasSports"
          label="既往是否有运动习惯"
          input-align="right"
          class="van-field_custom"
        >
          <template #input>
            <van-radio-group
              v-model="formState.hasSports"
              direction="horizontal"
            >
              <van-radio :name="true">是</van-radio>
              <van-radio :name="false">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          name="hasCVD"
          label="是否有心血管疾病（包括：心肌梗死、心绞痛、冠状动脉支架术后、冠状动脉搭桥术后、慢性心力衰竭、心房颤动）"
          input-align="right"
          class="van-field_custom wrap"
        >
          <template #input>
            <van-radio-group v-model="formState.hasCVD" direction="horizontal">
              <van-radio :name="true">是</van-radio>
              <van-radio :name="false">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          name="hasHDVD"
          label="是否有脑血管病（包括：脑出血、缺血性脑卒中、短暂性脑缺血发作）"
          input-align="right"
          class="van-field_custom wrap"
        >
          <template #input>
            <van-radio-group v-model="formState.hasHDVD" direction="horizontal">
              <van-radio :name="true">是</van-radio>
              <van-radio :name="false">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          name="hasVD"
          label="是否有外周血管疾病、视网膜病变（出血或渗出或视乳头水肿）"
          input-align="right"
          class="van-field_custom wrap"
        >
          <template #input>
            <van-radio-group v-model="formState.hasVD" direction="horizontal">
              <van-radio :name="true">是</van-radio>
              <van-radio :name="false">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          name="hasPD"
          label="是否有肺部疾病（包括：慢性阻塞性肺部疾病、哮喘、间质性肺病或囊性纤维变性）"
          input-align="right"
          class="van-field_custom wrap"
        >
          <template #input>
            <van-radio-group v-model="formState.hasPD" direction="horizontal">
              <van-radio :name="true">是</van-radio>
              <van-radio :name="false">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          name="hasMD"
          label="是否有代谢性疾病（包括：1型或2型糖尿病、糖尿病肾病、肾功能受损）"
          input-align="right"
          class="van-field_custom wrap"
        >
          <template #input>
            <van-radio-group v-model="formState.hasMD" direction="horizontal">
              <van-radio :name="true">是</van-radio>
              <van-radio :name="false">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          name="hasOD"
          label="是否存在下述症状或体征，包括：疼痛（胸部、颈部、下颌、上肢或其他代表缺血的部位不适）；休息或轻微运动时呼吸困难；头晕眼花或晕厥；端坐呼吸或阵发性夜间呼吸困难；脚踝水肿；心悸或心动过速；间歇性跛行；明确的心脏杂音；正常活动出现的异常疲劳或气短"
          input-align="right"
          class="van-field_custom wrap"
        >
          <template #input>
            <van-radio-group v-model="formState.hasOD" direction="horizontal">
              <van-radio :name="true">是</van-radio>
              <van-radio :name="false">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </van-cell-group>

      <van-cell-group class="row background_unset" inset v-if="isShowSubmit">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </van-cell-group>
    </van-form>
  </div>
</template>

<script lang="ts">
import { uni } from '@dcloudio/uni-h5';
import { defineComponent, reactive } from 'vue';
import { showDialog } from 'vant';
import { watch, computed, toRaw } from 'vue';
import data from '../../output.json';


function compareObjects(target, params) {
  for (const key in target) {
    if (target[key] !== null) {
      if (target[key] !== params[key]) {
        return false;
      }
    }
  }
  return true;
}


type FormState = {
  gender: number | undefined;
  ageRange: number | undefined;
  height: number | undefined;
  weight: number | undefined;
  obesityLevel: number | undefined;
  sbp: number | undefined;
  dbp: number | undefined;

  hasHD: boolean | undefined;
  hasβblocker: boolean | undefined;
  hasSports: boolean | undefined;
  hasCVD: boolean | undefined;
  hasHDVD: boolean | undefined;
  hasVD: boolean | undefined;
  hasPD: boolean | undefined;
  hasMD: boolean | undefined;
  hasOD: boolean | undefined;
  hasRisk: boolean;
};

export default defineComponent({
  // onShow() {
  //   console.log('onLoad', this)
  // },
  setup() {
    const formState = reactive<FormState>({
      gender: undefined,
      ageRange: undefined,
      height: undefined,
      weight: undefined,
      obesityLevel: undefined,
      sbp: undefined,
      dbp: undefined,

      hasHD: undefined,
      hasβblocker: undefined,
      hasSports: undefined,
      hasCVD: undefined,
      hasHDVD: undefined,
      hasVD: undefined,
      hasPD: undefined,
      hasMD: undefined,
      hasOD: undefined,
      hasRisk: false,
    });

    function calculateBMItoKPI() {
      const { weight, height } = formState;
      if (!weight || !height) {
        formState.obesityLevel = undefined;
        return;
      }
      const meter = height / 100;
      const bmi = weight / (meter * meter);

      // const kpi = {
      //   0: '低于正常体重',
      //   1: '正常体重',
      //   2: '超重',
      //   3: '肥胖',
      // }
      switch (true) {
        // case 18.5 <= bmi && bmi < 25:
        case bmi < 25:
          formState.obesityLevel = 1;
          break;
        case 25 <= bmi && bmi < 30:
          formState.obesityLevel = 2;
          break;
        case 30 <= bmi:
          formState.obesityLevel = 3;
          break;
        default:
          formState.obesityLevel = undefined;
          break;
      }
    }

    watch(
      () => formState.height,
      () => {
        calculateBMItoKPI();
      }
    );
    watch(
      () => formState.weight,
      value => {
        calculateBMItoKPI();
      }
    );

    watch(
      () => formState,
      ({ hasCVD, hasHDVD, hasVD, hasPD, hasMD, hasOD }) => {
        if (hasCVD && hasHDVD && hasVD && hasPD && hasMD) {
          showDialog({
            message:
              '抱歉，您现在的身体情况不适宜应用此APP出具运动处方，请咨询医生，把身体状态调节到正常',
          });
          return;
        }
        if (hasOD) {
          showDialog({
            message:
              '抱歉，您现在的身体情况不适宜应用此APP出具运动处方，请咨询医生，把身体状态调节到正常',
          });
          return;
        }
      },
      {
        deep: true,
      }
    );

    function verifySBP() {
      if (formState.sbp !== undefined && Number(formState.sbp) >= 160) {
        showDialog({
          message:
            '您的血压水平较高，暂不适合运动，请血压控制平稳后再通过本APP评估，科学开始运动',
        });
        return;
      }
    }

    function verifyDBP() {
      if (formState.dbp !== undefined && Number(formState.dbp) >= 100) {
        showDialog({
          message:
            '您的血压水平较高，暂不适合运动，请血压控制平稳后再通过本APP评估，科学开始运动',
        });
        return;
      }
    }

    function verifySportsRisk() {
      const { hasCVD, hasHDVD, hasVD, hasPD, hasMD, hasOD } = formState;
      if (
        hasCVD == false &&
        hasHDVD == false &&
        hasVD == false &&
        hasPD == false &&
        hasMD == false &&
        hasOD == false
      ) {
        formState.hasRisk = true;
      } else {
        formState.hasRisk = false;
      }
    }

    function onSubmit() {
      verifySportsRisk();
      const formData = toRaw(formState)
      const index = data.findIndex(item => {
        const { matchCondition } = item;
        return compareObjects(matchCondition, formData)
      });
      
      if(index < 0) {
        showDialog({
          message:
            '抱歉暂时无匹配处方结果！',
        });
        return;
      }

      uni.navigateTo({
        url: `/pages/result/index?index=${index}`,
      });
    }

    const isShowSubmit = computed(() => {
      if (formState.sbp !== undefined && Number(formState.sbp) >= 160) {
        return false;
      }
      if (formState.dbp !== undefined && Number(formState.dbp) >= 100) {
        return false;
      }
      if (formState.hasOD === true) {
        return false;
      }
      if (formState.hasCVD && formState.hasHDVD && formState.hasVD && formState.hasPD && formState.hasMD) { 
        return false;
      }
      return true;
    });

    return {
      formState,
      onSubmit,
      calculateBMItoKPI,
      verifySBP,
      verifyDBP,
      isShowSubmit,
    };
  },
});
</script>

<style lang="scss" scoped>
.page {
  background-color: #eeeeee;
}

.van-field_custom {
  display: flex;
  :deep(.van-field__label) {
    flex: 1;
  }
  :deep(.van-field__value) {
    flex: unset;
  }

  &.wrap {
    flex-wrap: wrap;

    :deep(.van-field__label) {
      flex: unset;
      width: 100%;
    }
    :deep(.van-field__value) {
      flex: unset;
      width: 100%;
    }
  }
}
</style>

